{include file="public/head"/}

<div id="main">
    <!--search框开始-->
    <div class="row clearfix" id="search-box" style="display:none;margin-top:0">
        <div class="col-md-12 text-right">
            <div>
                <div class="form-inline" role="form" v-cloak>
                    <input type="hidden" id="khmsg" value="{:lang('please_check_the_customers_to_be_adjusted')}">
                    <select class="form-control" @change="changecoun" v-model="countryval">
                        <option value="" selected>&nbsp;&nbsp;{:lang('country')}</option>
                        <option :value="item.id" v-for="(item,index) in country">{{item.name}}</option>
                    </select>

                    <select class="form-control" v-model="provincesval">
                        <option selected value="0">&nbsp;&nbsp;{:lang('state')}</option>
                        <option :value="item.id" v-for="(item,index) in provinces">{{item.name}}</option>
                    </select>

                    <select class="form-control" v-model="cotypeval">
                        <option value="0">{:lang('company_type')}</option>
                        <option :value="item.id" v-for="(item,index) in cotype">{{item.content}}</option>
                    </select>


                    <div class="form-group">
                        <label for="name">{:strtoupper(lang('search_content'))}</label>
                        <input type="text" class="form-control" v-model="dname" @keyup.13="serch"
                            placeholder="{:lang('please_enter_the_company_name,_address,_zip_code')}">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default btn-primary" @click="serch"><span
                                class="glyphicon glyphicon-search"></span>{:strtoupper(lang('search'))}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--search框结束-->

    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info" id="headeralert">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="ntDesktop">
            <div class="ntDesktop-head">{:strtoupper(lang('customer_list'))}</div>
            <div class="row clearfix" style="padding-top:0px">
                <div class="col-md-6 column">
                    <ul class="nav nav-tabs">
                        <li v-if="isshow_search" class="active">
                            <a href="#home" data-toggle="tab" @click="shdow">搜索结果<span
                                    class="glyphicon glyphicon-remove shdow" style="margin-left: 10px;"
                                    @click="shdow()"></span></a>
                        </li>

                        <li :class="{'active':status=='' && ! isshow_search}">
                            <a href="#home" data-toggle="tab" id="tab-all"
                                @click.prevent="statuschange('')">{:strtoupper(lang('all'))}</a>
                        </li>
                        <li :class="{'active':status=='normal' && ! isshow_search}">
                            <a href="#home" data-toggle="tab" id="tab-normal"
                                @click.prevent="statuschange('normal')">{:strtoupper(lang('normal'))}</a>
                        </li>
                        <li :class="{'active':status=='lock' && ! isshow_search}">
                            <a href="#home" data-toggle="tab" id="tab-lock"
                                @click.prevent="statuschange('lock')">{:strtoupper(lang('locking'))}</a>
                        </li>
                        <li :class="{'active':status=='del' && ! isshow_search}">
                            <a href="#home" data-toggle="tab" id="tab-del"
                                @click.prevent="statuschange('del')">{:strtoupper(lang('delete'))}</a>
                        </li>
                    </ul>
                </div>

                <div class="col-md-6 column text-right">
                    <div>
                        {in name="95" value="$Think.session.admin.auth_ids"}
                        <button class="btn btn-primary" @click="gotocompany(1)"><span
                                class="glyphicon glyphicon-plus"></span>{:strtoupper(lang('add_new_customer'))}</button>
                        <span style="padding:10px">&nbsp;</span>
                        {/in}

                        {in name="183" value="$Think.session.admin.auth_ids"}
                        <button type="button" class="btn btn-default option-edit" @click="Adjust"><span
                                class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('batch_adjustment'))}
                        </button>
                        {/in}

                        {in name="90" value="$Think.session.admin.auth_ids"}
                        <button type="button" class="btn btn-default option-lock"
                            @click="batchFun('/admin/customer/companylock','lock')"
                            v-if="status=='normal' || status==''"><span
                                class="glyphicon glyphicon-lock"></span>{:strtoupper(lang('batch_locking'))}
                        </button>
                        {/in}

                        {in name="91" value="$Think.session.admin.auth_ids"}
                        <button type="button" class="btn btn-default option-unlock"
                            @click="batchFun('/admin/customer/companyunlock','unlock')"
                            v-if="status=='lock'|| status==''"><span
                                class="glyphicon glyphicon-leaf"></span>{:strtoupper(lang('batch_unlock'))}
                        </button>
                        {/in}

                        {in name="92" value="$Think.session.admin.auth_ids"}
                        <button type="button" class="btn btn-default option-del"
                            @click="batchFun('/admin/customer/companydel','del')"
                            v-if="status=='normal'|| status==''"><span
                                class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('batch_delete'))}
                        </button>
                        {/in}

                        {in name="94" value="$Think.session.admin.auth_ids"}
                        <button type="button" class="btn btn-default option-recover"
                            @click="batchFun('/admin/customer/companyrecover','recover')"
                            v-if="status=='del'|| status==''"><span
                                class="glyphicon glyphicon-heart"></span>{:strtoupper(lang('batch_recovery'))}
                        </button>
                        {/in}

                        {in name="93" value="$Think.session.admin.auth_ids"}
                        <button type="button" class="btn btn-danger option-clear"
                            @click="batchFun('/admin/customer/companyclear','clear')" v-if="status=='del'"><span
                                class="glyphicon glyphicon-fire"></span> {:strtoupper(lang('batch_clear'))}
                        </button>
                        {/in}
                    </div>
                </div>
            </div>

            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-striped table-hover ntTable" v-cloak>
                        <thead>
                            <tr>
                                <th style="text-align:center"><input type="checkbox" @click="allsel" /></th>
                                <th> {:strtoupper(lang('company_type/company_name'))}</th>
                                <th> {:strtoupper(lang('address'))}</th>
                                <th> {:strtoupper(lang('number_of_employees'))}</th>
                                <th> {:strtoupper(lang('employees'))}</th>
                                <th> {:strtoupper(lang('status'))}</th>
                                <th> {:strtoupper(lang('activity'))}</th>
                                <th class="sorting" @click="sortfun(1)" data-order="1"> {:strtoupper(lang('edit'))}</th>
                                <th> {:strtoupper(lang('operate'))}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in list" :key="item.id+status" v-if="list.length>0">
                                <td align='center'><input type="checkbox" @click="onesel(item.id)" /></td>
                                <td>
                                    <small>{{item.cotypename}}</small>
                                    <br /><a
                                        :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=detail'">{{item.name}}</a>
                                </td>
                                <td>
                                    <small>{{item.address}}</small>
                                    <br /> {{item.addr}}
                                </td>
                                <td align='center'> {{item.works}}</td>
                                <td align='center'> {{item.salename}}</td>
                                <td align='center'> {{item.status}}</td>
                                <td align="center">
                                    <small>{{item.active_timeone}}<br /> {{item.active_timetwo}}</small>
                                </td>
                                <td> {{item.managename}} <br />
                                    <small>{{item.update_date}}</small>
                                </td>
                                <td class="text-right">
                                    <div>
                                        {in name="97" value="$Think.session.admin.auth_ids"}
                                        <button class="btn btn-sm btn-primary" @click="gotocompany(3,item.id)"><span
                                                class="glyphicon glyphicon-sunglasses"></span>{:strtoupper(lang('view'))}
                                        </button>
                                        {/in}

                                        {in name="96" value="$Think.session.admin.auth_ids"}
                                        <button class="btn btn-sm btn-primary option-edit" @click="gotocompany(4,item.id)"><span
                                                class="glyphicon glyphicon-pencil"></span>
                                            {:strtoupper(lang('edit'))}
                                        </button>
                                        {/in}

                                        <div class="btn-sm btn-group">
                                            <button type="button" class="btn btn-sm btn-primary dropdown-toggle"
                                                data-toggle="dropdown">
                                                {:strtoupper(lang('more_actions'))}
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                {in name="97" value="$Think.session.admin.auth_ids"}
                                                <li class="option-more">
                                                    <a :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=link'"
                                                        v-if="item.status!='DEL'" @click="gotocompany()">
                                                        <span class="glyphicon glyphicon-user"></span>
                                                        {:strtoupper(lang('contact'))}
                                                    </a>
                                                </li>
                                                {/in}

                                                {in name="97" value="$Think.session.admin.auth_ids"}
                                                <li class="option-more" v-if="item.status!='DEL'"><a
                                                        :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=bank'" @click="gotocompany()"><span
                                                            class="glyphicon glyphicon-piggy-bank"></span>{:strtoupper(lang('bank'))}</a>
                                                </li>
                                                {/in}

                                                {in name="97" value="$Think.session.admin.auth_ids"}
                                                <li class="option-more" v-if="item.status!='DEL'"><a
                                                        :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=branch'" @click="gotocompany()"><span
                                                            class="glyphicon glyphicon-oil"></span>分公司</a>
                                                </li>
                                                {/in}

                                                {in name="97" value="$Think.session.admin.auth_ids"}
                                                <li class="option-more" v-if="item.status!='DEL'"><a
                                                        :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=evaluate'" @click="gotocompany()"><span
                                                            class="glyphicon glyphicon-thumbs-up"></span>风评</a>
                                                </li>
                                                {/in}

                                                {in name="90" value="$Think.session.admin.auth_ids"}
                                                <li class="option-lock" v-if="item.status=='NORMAL'"><a href="#"
                                                        @click="batchFun('/admin/customer/companylock','lock',item.id)"><span
                                                            class="glyphicon glyphicon-lock"></span>{:strtoupper(lang('locking'))}</a>
                                                </li>
                                                {/in}

                                                {in name="91" value="$Think.session.admin.auth_ids"}
                                                <li class="option-unlock"
                                                    v-if="item.status=='LOCK'|| item.status=='DRAFT'"><a href="#"
                                                        @click="batchFun('/admin/customer/companyunlock','unlock',item.id)"><span
                                                            class="glyphicon glyphicon-leaf"></span>{:strtoupper(lang('unlock'))}</a>
                                                </li>
                                                {/in}

                                                {in name="92" value="$Think.session.admin.auth_ids"}
                                                <li class="option-del" v-if="item.status!='LOCK' && item.status!='DEL'">
                                                    <a href="#"
                                                        @click="batchFun('/admin/customer/companydel','del',item.id)"><span
                                                            class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}</a>
                                                </li>
                                                {/in}

                                                {in name="94" value="$Think.session.admin.auth_ids"}
                                                <li class="option-recover" v-if="item.status=='DEL' "><a href="#"
                                                        @click="batchFun('/admin/customer/companyrecover','recover',item.id)"><span
                                                            class="glyphicon glyphicon-heart"></span>{:strtoupper(lang('recovery'))}</a>
                                                </li>
                                                {/in}

                                                {in name="93" value="$Think.session.admin.auth_ids"}
                                                <li class="option-clear" v-if="item.status=='DEL'"><a href="#"
                                                        @click="batchFun('/admin/customer/companyclear','clear',item.id)"><span
                                                            class="glyphicon glyphicon-fire"></span>{:strtoupper(lang('clear'))}</a>
                                                </li>
                                                {/in}
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr style="text-align: center;" v-if="list.length==0">
                                <td colspan="9" class="no_date">{:strtoupper(lang('no_data'))}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="row clearfix">
                <div class="col-md-12 column">
                    <ul class="pagination" id="pagination" v-show="list.length!=0">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '#main',
        data: {
            list: [],
            page: 1,
            status: 'normal',
            dname: '',
            allid: [],//当前页ids
            batch: [],
            pageSize: 30,
            country: [],
            provinces: [],//省份
            cotype: [],//公司类型
            countryval: '',
            provincesval: 0,
            cotypeval: 0,
            isshow_search: false,
            order: 1
        },
        methods: {
            setPage(pageCurrent, pageSum) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator('#pagination', {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">' + langcon.page_home + '</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>' + langcon.previous_page + '</a></li>',
                    next: '<li class="next"><a href="javascript:;">' + langcon.next_page + '<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">' + langcon.last_page + '</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all: '<li class="page"><a href="javascript:;">' + myPageCount + ' / ' + this.page + 'PG , ' + this.pageSize + ' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            //数据所有获取
            getAllList() {
                $('.loding').show();
                this.batch = []
                $('th input').prop('checked', false)
                $.ajax({
                    url: "/admin/customer/customercompany",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        status: this.status,
                        dname: this.dname,
                        type_id: this.cotypeval,
                        country_id: this.countryval,
                        provinces_id: this.provincesval
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getcompany;
                        this.allid = result.dataids;
                        this.country = result.country;
                        this.provinces = result.provinces;
                        this.cotype = result.cotype;
                        if (result.size)
                            this.setPage(parseInt(this.page), result.size)
                        $('.loding').hide();
                    }
                })
            },
            //搜索内容存才进行搜索
            serch() {
                if ( this.countryval!='' || this.provincesval!=0 || this.cotypeval!=0 || this.dname!='') {
                    this.isshow_search = true;
                    this.status = '11';
                }else {
                    this.isshow_search = false;
                    this.status = 'normal';
                }
                this.page = '1';
                this.getAllList()
            },
            //关闭搜索
            shdow() {
                this.page = '1';
                this.countryval = '';
                this.provincesval = 0;
                this.cotypeval = 0;
                this.dname = '';
                this.status = '';
                this.isshow_search = false;
                this.getAllList()
            },
            //对数据的操作
            batchFun(requrl, reqact, did) {
                var data = {
                    act: reqact,
                    id: this.batch.join(',')
                }
                if (did) {
                    data.id = did
                } else {
                    data.id = this.batch.join(',')
                }
                $.ajax({
                    url: requrl,
                    data,
                    type: 'post',
                    success: (data) => {
                        data = JSON.parse(data)
                        change_mes_type('#headeralert', data.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*' + data.msg + '<br>')
                        if (data.status == 1) {
                            if (this.page > Math.ceil(this.list.length - 1 / this.pageSize)) {
                                if (this.page > 1) {
                                    this.page--
                                }
                            }
                            this.getAllList()
                        }
                    }
                })
            },
            //切换标签
            statuschange(status) {
                this.countryval = '';
                this.provincesval = 0;
                this.cotypeval = 0;
                this.dname = '';
                this.isshow_search = false;
                this.status = status;
                this.page = '1';
                this.getAllList()
            },
            delcompany(id) {
                $.ajax({
                    url: '/admin/customer/companydelete?id=' + id,
                    type: 'post',
                    dataType: 'json',
                    success: (res) => {
                        change_mes_type('#headeralert', res.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*' + res.msg + '<br>')
                        if (res.status == 1) {
                            if (!(this.list.length - 1)) {
                                if (this.page > 1) {
                                    this.page--
                                }
                            }
                            this.getAllList()
                        }
                    }
                });
            },
            allsel(event) {
                if ($(event.target).prop('checked')) {
                    $(event.target).parents('table').find('input').prop('checked', true)
                    this.batch = this.allid
                } else {
                    $(event.target).parents('table').find('input').prop('checked', false)
                    this.batch = []
                }
            },
            onesel(did) {
                if (this.batch.indexOf(did) == -1) {
                    this.batch.push(did)
                } else {
                    this.batch.splice(this.batch.indexOf(did), 1)
                }
                var isall = true
                $('td input').each(function () {
                    if (!$(this).prop('checked')) {
                        isall = false
                    }
                })
                $('th input').prop('checked', isall)
            },
            changecoun() {
                $.ajax({
                    url: '/admin/api/getpro',
                    data: {
                        pro_id: this.countryval,
                        table: 'provinces'
                    },
                    type: 'post',
                    success: (data) => {
                        data = JSON.parse(data)
                        this.provinces = data
                    }
                })
            },
            sortoneData(a, b) {
               if (this.order == 1) {
                    $(event.target).attr('data-order', 2)
                    return b.update_at - a.update_at
                } else {
                    $(event.target).attr('data-order', 1)
                    return a.update_at - b.update_at
                }
            },
            sortfun(type, $event) {
                 this.order = $(event.target).attr('data-order')
                if (type == 1) {
                    this.list.sort(this.sortoneData);
                }
            },
            Adjust() {
                if (this.batch.length) {
                    this.gotocompany(2);
                } else {
                    change_mes_type('#headeralert', 3)
                    $('#headeralert').show()
                    $('#headeralert p').html('*' + $('#khmsg').val() + '<br>')
                }
            },
            gotocompany(code='',comid=''){
                var storage=window.localStorage;
                storage.setItem("pagecompany", this.page);
                storage.setItem("statuscompany", this.status);//状态
                storage.setItem('countryvalcompany',this.countryval);//国家
                storage.setItem('provincesvalcompany',this.provincesval);//省份
                storage.setItem('cotypevalcompany',this.cotypeval);//公司类型
                storage.setItem('dnamecompany',this.dname);//搜索的值
                if(code==1){
                    //添加新客户
                    location.href='/admin/customer/companyadd';
                }else if(code==2){
                    //批量调整
                    storage.setItem('batch', this.batch.join(','))
                    location.href = "/admin/customer/batchcompany";
                }else if(code==3){
                    //查看
                    location.href = "/admin/customer/companycheck?company_id="+comid+'&tab=detail';
                }else if(code==4){
                    //编辑
                    location.href = "/admin/customer/companyedit?company_id="+comid;
                }
            }
        },
        created() {
            var storage=window.localStorage;
            if($('#formMenu').text() != 1){
                //返回列表
                if(storage.getItem('pagecompany')){
                    this.page= storage.getItem("pagecompany");
                    this.status= storage.getItem("statuscompany");//状态
                    this.countryval=storage.getItem('countryvalcompany');//国家
                    this.provincesval= storage.getItem('provincesvalcompany');//省份
                    this.cotypeval=storage.getItem('cotypevalcompany');//公司类型
                    this.dname =storage.getItem('dnamecompany');//搜索的值
                    if(this.countryval!='' || this.provincesval!=0 || this.cotypeval!=0 || this.dname!=''){
                        this.status='11';
                        this.isshow_search=true;
                    }
                }
            }
            storage.removeItem("pagecompany");
            storage.removeItem("statuscompany");//状态
            storage.removeItem('countryvalcompany');//国家
            storage.removeItem('provincesvalcompany');//省份
            storage.removeItem('cotypevalcompany');//公司类型
            storage.removeItem('dnamecompany');//搜索的值
            this.getAllList();
        }
    })
</script>